<script>
import { getStringSet, treeFilter } from "@utils/dataStruct";
import { getRouteItemByMenuItem } from "@utils/router";
import NavManager from "../topNav/navManager";

import taskIcon from "@/assets/images/menu/Menu_icon_任务.png";
import homeIcon from "@/assets/images/menu/Menu_icon_首页.png";






const getIconUrl = (item) => {
    const obj = {
        "首页": homeIcon,
        "就诊信息": taskIcon,
    }
    return obj[item.name] || ''
}
import {handleList} from './menuHandle.js';
export default {
    name: "menuNav",
    props: {
        showTab: Boolean,
        mode: {
            type: String,
            default: "horizontal", // horizontal / vertical
        },
        showMenuIcon: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            activeMenu: "main",
            menuFilterKeyWord: "",
            // isCollapse: false,
            navManager: new NavManager(this, {
                onUpdate: () => {
                    this.updateNavTabList();
                },
            }),
        };
    },
    computed: {
        menuMap() {
            return this.$store.state.account.menuMap || {};
        },
        isVertical() {
            return this.mode === "vertical";
        },
        menuList() {
            let keepMap = {};
            let out = treeFilter(
                this.$store.state.account.menuList || [],
                (item, parentArray) => {
                    if (
                        this.menuFilterKeyWord &&
                        !(item.children && item.children.length) &&
                        !item.name.includes(this.menuFilterKeyWord)
                    ) {
                        if (!parentArray.filter((v) => keepMap[v.key]).length) {
                            return false;
                        }
                    }

                    if (item.name.includes(this.menuFilterKeyWord)) {
                        keepMap[item.key] = true;
                    }

                    let itemSet = getStringSet(item.description, "--");
                    if (itemSet.adminOnly && !this.isAdmin) {
                        return false;
                    }

                    if (itemSet.adminOnlyHide && this.isAdmin) {
                        return false;
                    }
                    if (itemSet.menuIconType) {
                        item.menuIconType = itemSet.menuIconType;
                    }
                    if (itemSet.frontName) {
                        item.frontName = itemSet.frontName;
                    }

                    return true;
                }
            );
            return out.filter(i => i.ELEMENTURL!=='commonpermit'); // 不展示这个菜单下的东西
        },
        activePath() {
            return this.$store.state.account.activePath || [];
        },
        isCollapse: {
            get() {
                return this.showTab;
            },
            set(n) {
                this.$emit("updateShowTab", n);
            },
        },
    },
    watch: {
        activePath: {
            immediate: true,
            handler(n) {
                if (n && n.length) {
                    this.$nextTick(() => {
                        let index = n[n.length - 1].key;
                        this.activeMenu = index || "main";
                    });
                }
            },
        },
        menuList: {
            immediate: true,
            handler(n) {
                if (n) {
                    if(n.length>0){
                        n.map((item,key)=>{
                            //console.log(item,'itemitemitemitemitem')
                            // console.log(item.children,'children')
                             if(item.children){
                                 item.children.map((items,index)=>{ 
                                   if( items.ELEMENTNAME== '工单详情'){
                                     delete item.children[index]
                                   }
                                 })
                             }
                        }) 
                       // console.log(n,'newwsnnnnnnnnn')     
                    }
                    this.setMenuByRoute();
                }
            },
        },
        $route: {
            immediate: true,
            handler(n) {
                if (!n) return;
                this.setMenuByRoute();
            },
        },
    },
    render(h) {
        const getIcon = (item) => {
            let iconUrl = getIconUrl(item);
            // 为了无论是否有图片，菜单名称都可以对齐 <img class='icon_img' src={item.icon} />
            return (this.showMenuIcon ? <span style="display: inline-block; width: 25px;">
                {
                    iconUrl ? 
                    <div class='icon_img_wrapper' style={{
                        backgroundImage: `url('${iconUrl}')`
                    }}>
                    </div> :
                    null
                }
            </span> : null);
        }
        const getMenuList = (menuList) => {
            let menuListRender = (menuList || []).map((item) => {
                if (item.children && item.children.length) {
                    return (
                        <el-submenu
                            index={item.key}
                            title={item.name}
                            popper-append-to-body={true}
                            style="margin-right:5px"
                        >
                            <template slot="title">
                                {getIcon(item)}
                                <span slot="title">{item.name}</span>
                            </template>

                            {getMenuList(item.children)}
                        </el-submenu>
                    );
                } else {
                    return (
                        <el-menu-item index={item.key}>
                            {getIcon(item)}
                            <span slot="title" title={item.name}>{item.name}</span>
                        </el-menu-item>
                    );
                }
            });
            return menuListRender;
        };

        return (
            <div class={"h-100  left_wrapper " + this.mode}>
                {
                    // 收缩标识，暂时不用了
                    // this.isVertical ? (
                    //     <div
                    //         class="coll_tag"
                    //         on-click={() => {
                    //             this.isCollapse = !this.isCollapse;
                    //         }}
                    //         style="cursor: pointer;"
                    //     >
                    //         {this.isCollapse ? (
                    //             <i class="el-icon-d-arrow-left" />
                    //         ) : (
                    //             <i class="el-icon-d-arrow-right" />
                    //         )}
                    //     </div>
                    // ) : null
                    null
                }
                <div class="menunav ">
                    {this.isVertical ? (
                        <el-input
                            class="el_input search_input m-4"
                            suffix-icon="el-icon-search"
                            value={this.menuFilterKeyWord}
                            style="width: auto"
                            size="mini"
                            placeholder="请输入筛选菜单"
                            clearable
                            on-input={(v) => {
                                this.menuFilterKeyWord = v;
                            }}
                        ></el-input>
                    ) : null}

                    <el-menu
                        ref="menu"
                        default-active={this.activeMenu}
                        class="el-menu-vertical-demo"
                        mode={this.mode}
                        unique-opened={true}
                        on-select={this.handleSelect}
                        on-close={this.handleClose}
                        text-color="#b0fff9"
                        active-text-color="#fff"
                        background-color="transparent"
                    >
                        {getMenuList(this.menuList)}
                    </el-menu>
                    {this.isVertical ? <div style="height: 20px;"></div> : null}
                </div>
            </div>
        );
    },
    methods: {
        setMenuByRoute() {
            this.$store.dispatch("account/setMenuByRoute", this.$route);
        },
        async handleSelect(index, indexPath) {
            let active = null;

            // if (index === this.homePage.key) {
                //     active = this.homePage;
            // } else {
                //     active = this.menuMap[index];
            // }
            active = this.menuMap[index];
            console.log(index, "打开菜单", active)
            if(['http', "http:",'http:/', "http://", "/"].includes(active.path) && active.isIframe) {
                console.warn('打开菜单失败', active.path, ":不是一个合法的菜单地址！")
                return;
            }

            let breakOut = false;
            const breakOutFn = () => {
                breakOut = true;
            }

            if (active) {
                for (const iterator of handleList) {
                    const element = iterator;
                    const flag = element.match(active);
                    if(breakOut) {
                        break;
                    }

                    if(flag) {
                        let result = element.handler(active, breakOutFn, this.navManager );
                        if(result && result.then) {
                            await new Promise(resolve => {
                                result.then(res => {
                                    resolve(res);
                                }).catch(e => {
                                    resolve(active);
                                })
                            })
                        }
                    }
                }

                // let routeSet = getRouteItemByMenuItem(active);

                // if (routeSet.name === "iframe") {
                //     const { path, moduleName, iframeUrl } =
                //         this.$route.query || {};

                //     // if(moduleName) {
                //     //     if(iframeUrl === active.iframeUrl) {
                //     //         return;
                //     //     }
                //     // }else
                //     if (path === active.path) {
                //         return;
                //     }
                // } else if (this.$route.path === routeSet.path) {
                //     return;
                // }
                // this.navManager.jumpTo(routeSet);
            }
        },
        handleClose() {},
        removeRoute(fullPath) {
            this.navManager.removeItem(fullPath);
        },
        pushRoute(routeSet) {
            this.navManager.jumpTo(routeSet);
        },
        removeAll() {
            this.navManager.removeAll();
        },
        removeOther(...reset) {
            this.navManager.removeOther(...reset);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@assets/variables.scss";
$text-color: #b1fef8;
$text-color-active: #00d6b2;
$menu_back_color: #001220;
$active_back_color: #fff;
.left_wrapper {
    // background-color: $--background-color-opcity;
    // position: relative;
    min-height: 36px;
    // background-color: #21293a;
    background: $menu_back_color;

}
// 收缩标志
.coll_tag {
    z-index: 999;
    position: absolute;
    background: $--color-primary;
    width: 15px;
    height: 40px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    top: 50%;
    right: -15px;
    line-height: 40px;
    color: #fff;
}
.left_wrapper {
    ::v-deep {
        .el-menu {
            border: none;
            padding-left: 6px;
            background: rgba(0, 0, 0, 0);
            // 只有一级菜单有这样式
            &.el-menu-vertical-demo {
                &>.el-submenu.is-active {
                    // background: #fff;
                    position: relative;
                    &::before {
                        pointer-events: none;
                        position: absolute;
                        display: block;
                        content: "";
                        width: 20px;
                        height: 20px;
                        top: -20px;
                        right: 0px;
                        background-image: radial-gradient(at 0% 0%, transparent 20px, #fff 21px, #fff 100%);
                    }
                    &::after {
                        pointer-events: none;
                        position: absolute;
                        display: block;
                        content: "";
                        width: 20px;
                        height: 20px;
                        top: 36px;
                        right: 0px;
                        background-image: radial-gradient(at 0% 100%, transparent 20px, #fff 21px, #fff 100%);
                    }
                    &>.el-submenu__title:nth-child(1) {
                        color: $--color-primary !important;
                        padding-left: 16px!important;
                        border-left: 4px solid $text-color-active;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                        background: #fff!important;
                        .el-submenu__icon-arrow {
                            color:  $--color-primary;
                        }
                    }
                    .el-menu {
                        // background: $menu_back_color;
                        border-top-right-radius: 16px;
                    }
                    .icon_img_wrapper {
                        filter: drop-shadow(-210px 0px 0px $--color-primary);
                    }
                }
            }

            .el-submenu {
                margin-right: 0px !important; // 不要右侧的margin
                .el-submenu__title {
                }
                
            }
            // icon图标
            .icon_img_wrapper {
                position: relative;
                left: 210px;
                width: 16px;
                height: 16px;
                background-repeat: no-repeat;
                background-size: contain;
                filter: drop-shadow(-210px 0px 0px $text-color);
            }
        }


        // 箭头样式
        .el-submenu__icon-arrow {
            right: 8px;
        }
        .el-menu-item {
            height: 36px;
            line-height: 36px;
            border-radius: 5px;

            &:hover, &:focus {
                color: $active_back_color !important;
                background-image: linear-gradient(270deg, $menu_back_color 0%, #6c9fa0 50%, $menu_back_color 100%) !important;
            }

            // 选中的菜单样式
            &.is-active {
                // color: $active_back_color !important;
                background-image: linear-gradient(270deg, $menu_back_color 0%, #6c9fa0 50%, $menu_back_color 100%) !important;
                color: $--color-primary !important;
                // background: #fff !important;
                border-radius: 0;
            }
        }

        .el-submenu__title {
            height: 36px;
            line-height: 36px;
            padding: 0 4px;
            i {
                color: #fff;
            }
            &:hover {
                background-color: rgba(0, 0, 0, 0);
            }
        }
        .is-opened > .el-submenu__title {
            color: $active_back_color !important;
        }
        // .search_input {
        //     width: auto;
        //     border: 1px solid #ccc;
        //     box-sizing: border-box;
        //     border-radius: 5px;
        // }
        .search_input {
            // .el-input{
            //     border: 1px solid #e3e3e3;
            //     border-radius: 4px;
            // }
            padding: 4px 8px;
            input {
                box-shadow: inset 20px 200px rgba(234 ,237, 241, 0.2);
                color: #fff;
            }
            .el-input__suffix{
                right: 10px;
                font-size: 16px;
            }
        }
    }
}
// 水平样式
.horizontal {
    ::v-deep {
        .el-menu.el-menu--horizontal {
            border-bottom-width: 0;
        }
        .el-menu--horizontal > .el-submenu .el-submenu__title {
            height: 36px;
            line-height: 36px;
            padding: 0 4px;
        }
        .el-submenu__icon-arrow {
            display: none;
        }
        .el-menu {
            width: calc(100vw - 246px);
            display: flex;
        }
        .menunav {
            height: 50px;
            display: flex;
            align-items: center;
        }
    }
}
::v-deep .el-input__inner {
    background-color: $menu_back_color !important;
    border: 0;
    // color: #eaeef4;
}
// 垂直样式
.vertical {
    .menunav {
        width: 220px;
        margin-right: 0px;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-image: url('~@/assets/images/menuBg.png');
        background-size: 100% 70%;
        background-repeat: no-repeat;
        background-position-y: bottom;
        .el-menu-vertical-demo {
            flex: 1;
            overflow: auto;
            overflow-x: hidden;
            &::-webkit-scrollbar {
                width: 0px;
            }
        }
    }
}
</style>
